<template>
  <view class="table-box">
    <view class="table-row">
      <text>姓名</text>
      <text>数学</text>
      <text style="width:150rpx">上周纠正率</text>
    </view>
    <view class="table-row" v-for="item in studentList" :key="item.id">
      <text>{{ item.name }}</text>
      <text>{{ item.math }}</text>
      <text style="width:150rpx">{{ item.lastWeekCorrectRate + '%' }}</text>
    </view>
  </view>
</template>
<script setup>
import { ref } from 'vue';

const studentList = ref([
  {
    id: 1,
    name: '张三',
    math: 100,
    lastWeekCorrectRate: 90,
  },
  {
    id: 2,
    name: '李四',
    math: 90,
    lastWeekCorrectRate: 80,
  },
  {
    id: 3,
    name: '王五',
    math: 80,
    lastWeekCorrectRate: 70,
  },
  {
    id: 4,
    name: '赵六',
    math: 70,
    lastWeekCorrectRate: 60,
  },
  {
    id: 5,
    name: '孙七',
    math: 60,
    lastWeekCorrectRate: 50,
  },
  {
    id: 6,
    name: '周八',
    math: 50,
    lastWeekCorrectRate: 40,
  }
])

</script>
<style lang="scss" scoped>
.table-box {
  border: solid 1px #0060E6;
  border-radius: 24rpx;
  overflow: hidden;
  margin: 0 30rpx;

  .table-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24rpx 32rpx;
    color: #333;
    font-size: 28rpx;

    &:nth-child(odd) {
      background-color: #EBF3FF;
    }

    &:first-child {
      font-weight: bold
    }

    &:last-child {
      border-bottom-left-radius: 24rpx;
      border-bottom-right-radius: 24rpx;
    }
  }
}
</style>